<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Image Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Image</h1>
        </gs-jumbo>
            
        <gs-container padded>
                <h3 class="doc-header">Tag:</h3>
                <div class="doc-section doc-mono">
                    <pre>&lt;gs-img src="..."&gt;&lt;/gs-img&gt;</pre>
                </div>
                
                <h3 class="doc-header">Description:</h3>
                <div class="doc-section">
                    The gs-img element is for adding an image to your page and having it change it's size depending on window width or <a href="https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries">CSS Media Queries</a>.
                </div>
                
                <h1 class="doc-header">Examples:</h1>
                <div class="doc-section">
                    <div class="doc-example-description">
                        <span class="h3">Skeleton Example:</span>
                        <p>A basic <code>gs-img</code> element. This element will have the following behaviors:</p>
                        <ol>
                            <li>The gs-img will center itself</li>
                            <li>The gs-img will always be 272px wide by 478px tall</li>
                        </ol>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="40">
                            <gs-img src="doc-library/Lock.png" min-width="all {272px, 478px};"></gs-img>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[min-width]</code>:</span>
                        <p>The "min-width" attribute enables you to change the images size depending the minimum width of the screen. The "min-width" attribute takes a list of expressions seperated by semi-colons. The format of an expression is "&lt;WINDOW-WIDTH&gt; {&lt;IMAGE-WIDTH&gt;, &lt;IMAGE-HEIGHT&gt;};". If no image height is specified: the gs-img will use the image width as the image height. Precedence for the expressions is determined by order, so the last expression is more important that the first.</p>
                        
                        Here is a list of shortcuts for some pre-set sizes:
                        <ol>
                            <li>All instances of "all" are replaced with "0px"</li>
                            <li>All instances of "small" or "sml" are replaced with "768px"</li>
                            <li>All instances of "medium" or "med" are replaced with "992px"</li>
                            <li>All instances of "large" or "lrg" are replaced with "1200px"</li>
                        </ol>
                        
                        In this example the gs-font element will change the image size at 4 widths.<br />
                    </div>
                    <gs-doc-example>
                        <template for="html" height="20">
                            <gs-img src="doc-library/Lock.png" min-width="all {100px}; 600px {200px}; sml {300px}; med {500px};"></gs-img>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[media]</code>:</span>
                        <p>The "media" attribute enables you to change the image size depending <a href="https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries">CSS Media Queries</a>. The "media" attribute takes a list of expressions seperated by semi-colons. The format of an expression is "&lt;MEDIA-SELECTOR&gt; {&lt;IMAGE-WIDTH&gt;, &lt;IMAGE-HEIGHT&gt;};". Precedence for the expressions is determined by order, so the last expression is more important that the first.</p>
                        
                        There are several shortcuts for some pre-set sizes:
                        <ol>
                            <li>All instances of "small" or <code>[sml]</code> are replaced with "768px"</li>
                            <li>All instances of "medium" or <code>[med]</code> are replaced with "992px"</li>
                            <li>All instances of "large" or <code>[lrg]</code> are replaced with "1200px"</li>
                        </ol>
                        
                        In this example the gs-font element will change the font-size at 4 media conditions.<br />
                    </div>
                    <gs-doc-example>
                        <template for="html" height="20">
                            <gs-img src="doc-library/Lock.png" media="all {100px}; screen and (min-width: 500px) {150px, 200px}; screen and (min-width: small) {200px}; print {250px};"></gs-img>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[image-cover]</code>:</span>
                        <p>The "image-cover" attribute enables you to fill the gs-img even if some of the image will get chopped off.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="45">
                            <gs-img src="doc-library/Lock.png" min-width="all {320px, 478px};" image-cover></gs-img>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[align]</code>:</span>
                        <p>The "align" attribute enables you to make the image go to the left or right instead of center.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="39">
                            <gs-img src="doc-library/Lock.png" min-width="all {100px};" align="left"></gs-img>
                            <br />
                            <gs-img src="doc-library/Lock.png" min-width="all {100px};" align="center"></gs-img>
                            <br />
                            <gs-img src="doc-library/Lock.png" min-width="all {100px};"></gs-img>
                            <br />
                            <gs-img src="doc-library/Lock.png" min-width="all {100px};" align="right"></gs-img>
                        </template>
                    </gs-doc-example>
                </div>
        </gs-container>
    </body>
</html>